.referral-bonuses-page {
    padding: 0 24px 24px;
    max-width: var(--mobile-page-max-width);
}

.referral-bonuses-page > * {
    font: var(--mobile-font-copy-regular);
    color: var(--mobile-text-primary);
}

.referral-bonuses-page .nav-elem {
    padding: 0;
}

.referral-bonuses-page .invite-friends-cta {
    margin: 24px 0;
}
.referral-bonuses-page .referral-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 16px;
}
.referral-bonuses-page.list-shown .invite-friends-cta,
.referral-bonuses-page .referral-list > * {
    margin: 16px 0;
}

.referral-bonuses-page .invited-friend {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.referral-bonuses-page .invited-friend > *:not(:last-child) {
    margin-right: 12px;
}

.referral-bonuses-page .invited-friend .friend-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: var(--mobile-surface-3);
}

.referral-bonuses-page .invited-friend .email-and-expiry {
    display: flex;
    flex-direction: column;
}
.referral-bonuses-page .invited-friend .email-and-expiry > *:not(:last-child) {
    margin-bottom: 4px;
}

.referral-bonuses-page .invited-friend.expired .email-and-expiry .email,
.referral-bonuses-page .invited-friend.expired .email-and-expiry .expiry-date {
    color: var(--mobile-text-on-color-disabled);
}

.referral-bonuses-page .invited-friend .email-and-expiry .expiry-date {
    font: var(--mobile-font-caption-large-regular);
    color: var(--mobile-text-secondary);
}

.referral-bonuses-page .more-storage-prompt a {
    color: var(--mobile-link-primary);
    text-decoration: underline;
}
